<template>
  <view class="order-detail-container">
    <!-- 订单状态头部 -->
   <!-- <view class="order-header" :style="{background: getStatusBgColor(orderInfo.status)}">
      <view class="status-info">
        <text class="status-text">{{getStatusText(orderInfo.status)}}</text>
        <text class="status-desc">{{getStatusDesc(orderInfo.status)}}</text>
      </view>
      <image class="status-icon" :src="getStatusIcon(orderInfo.status)" mode="aspectFit"></image>
    </view> -->
	<view style="padding: 20rpx 20rpx 0 20rpx;">
		<view v-if="hexiaoIngo.status==1" class="orderInfostatus">待核销</view>
		<view v-if="hexiaoIngo.status==2" class="orderInfostatus">已核销</view>
		<view v-if="hexiaoIngo.status==3" class="orderInfostatus">已失效</view>
	</view>
   
    <!-- 订单基本信息 -->
    <view class="order-card">
      <view class="section-title">订单信息</view>
      <view class="info-item">
        <text class="label">订单编号：</text>
        <text class="value">{{orderInfo.orderNo}}</text>
      </view>
      <view class="info-item">
        <text class="label">下单时间：</text>
        <text class="value">{{orderInfo.createTime}}</text>
      </view>
      <view class="info-item">
        <text class="label">支付方式：</text>
        <text class="value">微信支付</text>
      </view>
      <view class="info-item">
        <text class="label">支付金额：</text>
        <text class="value price">¥{{orderInfo.actualPay}}</text>
      </view>
	  <view class="info-item" v-if="orderInfo.makeTime">
	    <text class="label">预约时间：</text>
	    <text class="value price">{{orderInfo.makeTime}}</text>
	  </view>
	  <view class="info-item" v-if="orderInfo.makeStoreName">
	    <text class="label">预约门店：</text>
	    <text class="value price">{{orderInfo.makeStoreName}}</text>
	  </view>
	  <view class="info-item"  v-if="orderInfo.makeName">
	    <text class="label">预约姓名：</text>
	    <text class="value price">{{orderInfo.makeName?orderInfo.makeName:''}}</text>
	  </view>
	  <view class="info-item"  v-if="orderInfo.makePhone">
	    <text class="label">预约手机号：</text>
	    <text class="value price">{{orderInfo.makePhone?orderInfo.makePhone:''}}</text>
	  </view>
	  <view class="info-item"  v-if="orderInfo.makeIdCard">
	    <text class="label">预约身份证号：</text>
	    <text class="value price">{{orderInfo.makeIdCard?orderInfo.makeIdCard:''}}</text>
	  </view>
    </view>

    <!-- 商品信息 -->
    <view class="order-card">
      <view class="section-title">商品信息</view>
      <view class="goods-item">
        <image class="goods-img" v-if="goodInfo.packageCoverImage" :src="goodInfo.packageCoverImage" mode="aspectFill"></image>
		<image class="goods-img" v-else src="/static/icon_haibao.png" mode="aspectFill"></image>
        <view class="goods-info">
          <view class="goods-name">{{goodInfo.name}}</view>
         <view class="specs">商品规格：{{goodInfo.specs}}</view>
          <view class="goods-quantity">数量：1</view>
          <view class="goods-price">
            <text class="original-price" v-if="goodInfo.originalPrice">¥{{goodInfo.originalPrice}}</text>
            <text class="current-price">¥{{goodInfo.currentPrice}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 核销信息 -->
    <view class="order-card">
      <view class="section-title">核销信息</view>
      <view class="info-item">
        <text class="label">核销状态：</text>
        <text class="value" :style="{color: hexiaoIngo.status==1 ? '#07C160' : '#FF9900'}">
          <text v-if="hexiaoIngo.status==1">待核销</text>
          <text v-if="hexiaoIngo.status==2">已核销</text>
          <text v-if="hexiaoIngo.status==3" >已失效</text>
        </text>
      </view>
      <view class="info-item" v-if="hexiaoIngo.verifyUserName">
        <text class="label">核销人员：</text>
        <text class="value">{{hexiaoIngo.verifyUserName}}</text>
      </view>
      <view class="info-item" v-if="hexiaoIngo.verifyTime">
        <text class="label">核销时间：</text>
        <text class="value">{{hexiaoIngo.verifyTime}}</text>
      </view>
      <view class="info-item" v-if="hexiaoIngo.status==2">
        <text class="label">核销码：</text>
        <text class="value verification-code">{{hexiaoIngo.code}}</text>
      </view>
      <view class="info-item"  v-if="hexiaoIngo.verifyTime">
        <text class="label">核销门店：</text>
        <text class="value">{{userInfo.storeName}}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
   <!-- <view class="action-btns" v-if="hexiaoIngo.status==1">
      <view class="btn cancel" @click="cancelOrder">取消订单</view>
      <view class="btn primary" @click="verifyOrder">立即核销</view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        orderNo: '20230728123456',
        status: 'pending', // pending-待核销 verified-已核销 canceled-已取消
        createTime: '2023-07-28 14:30:25',
        paymentMethod: '微信支付',
        totalAmount: '99.00',
        goodsImg: 'https://via.placeholder.com/200',
        goodsName: '商品名称示例',
        spec: '规格：默认',
        quantity: 1,
        originalPrice: '129.00',
        currentPrice: '99.00',
        verificationStatus: false,
        verifier: '',
        verificationTime: '',
        verificationCode: '1234 5678',
        storeName: 'XX分店',
		
      },
	  orderId:'',
	  productId:'',
	  orderInfo:'',
	  goodInfo:'',
	  hexiaoIngo:'',
	  userInfo:'',
    }
  },
  onLoad(options) {
    // 从路由参数获取订单ID
	 this.userInfo= uni.getStorageSync("userInfo")
     this.orderId = options.orderId
	 //this.productId=options.productId
    // 这里可以调用接口获取订单详情数据
     this.getOrderDetail()
  },
  methods: {
	getOrderDetail(){
		uni.showLoading({
			title: '加载中'
		})
		this.$http('jeecg-boot/app/market/bicOrder/queryById',{
		   id:this.orderId
		},'GET').then(res => {
				   //console.log(res)
			 uni.hideLoading();
			 this.orderInfo=res.result
		     this.productId=res.result.productId
			 this.queryByOrderId()
			 this.getGoods()
			 
		 })
		
	},
	getGoods(){
		this.$http('jeecg-boot/app/market/bicProduct/queryById',{
		   id:this.productId
		},'POST').then(res => {
				   //console.log(res)
			this.goodInfo=res.result
			 
		 })
	},
	queryByOrderId(){
		this.$http('jeecg-boot/app/market/bicVerificationCode/queryByOrderId',{
		   orderId:this.orderId
		},'GET').then(res => {
			this.hexiaoIngo=res.result
			 
		 })
	},
    // 获取订单状态文本
    getStatusText(status) {
      const statusMap = {
        pending: '待核销',
        verified: '已核销',
        canceled: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 获取订单状态描述
    getStatusDesc(status) {
      const descMap = {
        pending: '等待门店核销订单',
        verified: '订单已完成核销',
        canceled: '订单已取消'
      }
      return descMap[status] || ''
    },
    
    // 获取状态背景色
    getStatusBgColor(status) {
      const colorMap = {
        pending: 'linear-gradient(to right, #FF9500, #FF5A5F)',
        verified: 'linear-gradient(to right, #09BB07, #5CB531)',
        canceled: 'linear-gradient(to right, #999999, #CCCCCC)'
      }
      return colorMap[status] || '#666666'
    },
    
    // 获取状态图标
    getStatusIcon(status) {
      const iconMap = {
        pending: '/static/order-pending.png',
        verified: '/static/order-verified.png',
        canceled: '/static/order-canceled.png'
      }
      return iconMap[status] || '/static/order-default.png'
    },
    
    // 取消订单
    cancelOrder() {
      uni.showModal({
        title: '提示',
        content: '确定要取消此订单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '处理中...' })
            // 这里调用取消订单接口
            setTimeout(() => {
              this.orderInfo.status = 'canceled'
              uni.hideLoading()
              uni.showToast({ title: '订单已取消', icon: 'success' })
            }, 1000)
          }
        }
      })
    },
    
    // 核销订单
    verifyOrder() {
      uni.showModal({
        title: '提示',
        content: '确定要核销此订单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '核销中...' })
            // 这里调用核销订单接口
            setTimeout(() => {
              this.orderInfo.status = 'verified'
              this.orderInfo.verificationStatus = true
              this.orderInfo.verifier = '管理员'
              this.orderInfo.verificationTime = this.formatTime(new Date())
              uni.hideLoading()
              uni.showToast({ title: '核销成功', icon: 'success' })
            }, 1000)
          }
        }
      })
    },
    
    // 格式化时间
    formatTime(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      const seconds = date.getSeconds().toString().padStart(2, '0')
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-container {
  padding-bottom: 100px;
  background-color: #f7f7f7;
  min-height: 100vh;
}

/* 订单头部 */
.order-header {
  height: 60px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  
  .status-info {
    display: flex;
    flex-direction: column;
    
    .status-text {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .status-desc {
      font-size: 14px;
      opacity: 0.9;
    }
  }
  
  .status-icon {
    width: 80px;
    height: 80px;
    opacity: 0.8;
  }
}

/* 订单卡片 */
.order-card {
  margin: 20rpx;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  
  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .info-item {
    display: flex;
    margin-bottom: 12px;
    font-size: 14px;
    
    .label {
      color: #999;
      width: 80px;
    }
    
    .value {
      flex: 1;
      color: #333;
      
      &.price {
        color: #FF5A5F;
        font-weight: bold;
      }
      
      &.verification-code {
        letter-spacing: 2px;
        font-weight: bold;
      }
    }
  }
}

/* 商品信息 */
.goods-item {
  display: flex;
  margin-bottom: 15px;
  
  .goods-img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin-right: 12px;
  }
  
  .goods-info {
    flex: 1;
    
    .goods-name {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .goods-spec {
      font-size: 12px;
      color: #999;
      margin-bottom: 5px;
    }
    
    .goods-quantity {
      font-size: 12px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .goods-price {
      display: flex;
      align-items: center;
      
      .original-price {
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
        margin-right: 8px;
      }
      
      .current-price {
        font-size: 16px;
        color: #FF5A5F;
        font-weight: bold;
      }
    }
  }
}

/* 操作按钮 */
.action-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
  
  .btn {
    flex: 1;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22px;
    font-size: 16px;
    margin: 0 5px;
    
    &.cancel {
      background-color: #f0f0f0;
      color: #666;
    }
    
    &.primary {
      background: linear-gradient(to right, #FF9500, #FF5A5F);
      color: #fff;
    }
  }
}
.orderInfostatus{
	background: #fff;
	text-align: center;
	font-size: 36rpx;
	line-height: 80rpx;
	/* margin-bottom: 20rpx; */
}
.specs{
	font-size: 26rpx;
	    color: #666;
}
</style>